<template>
  <div class="yty-history">
    <h3 class="h3">编辑维护</h3>
    <a-form-model
      :model="form"
      :colon="false"
      :labelCol="{span:6}"
      :wrapper-col="{span:20}"
      style="margin:10px 0"
    >
      <a-row style="display: flex;align-items: center;">
        <a-col :span="5">
          <a-form-model-item label="关键词" class="from-item__class">
            <a-input placeholder v-model="searchKey" />
          </a-form-model-item>
        </a-col>
        <a-col :span="9">
          <a-form-model-item label="时间段" class="from-item__class">
            <a-date-picker
              v-model="maintainStartTime"
              :default-value="maintainStartTime"
              :disabled-date="disabledStartDate"
              show-time
              format="YYYY-MM-DD"
              placeholder="开始时间"
              @openChange="handleStartOpenChange"
            />
            <span style="color:#9fb043;font-size:18px;padding:0 10px;">—</span>
            <a-date-picker
              v-model="maintainEndTime"
              :default-value="maintainEndTime"
              :disabled-date="disabledEndDate"
              show-time
              format="YYYY-MM-DD"
              placeholder="结束时间"
              :open="endOpen"
              @openChange="handleEndOpenChange"
            />
          </a-form-model-item>
        </a-col>

        <a-col :span="3" style="display: flex;justify-content: space-between;margin-left:20px">
          <a-button type="primary" @click="onSubmit" >查询</a-button>
        </a-col>
        <a-col :span="4" :offset="5">
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="tableclass">
      <a-table
        :data-source="data"
        :pagination="false"
        :columns="columns"
        :row-selection="{onChange:onChange,onSelect:onSelect}"
      >
        <template slot="action" slot-scope="text,record,index">
          <div class="handle">
            <!--<span>使用记录</span>
            <a-button type="danger" style="background:#207064;border:0;color:black;width:70px">备份</a-button>-->
            <a-button
              type="danger"
              @click="delBtnFn(record,index)"
            >删除</a-button>
          </div>
        </template>
      </a-table>

      <div class="content-bottom clearfix">
        <div class="page-box">
          <div class="page-right">
            <!-- <a-button type="danger" style="background:#207064;border:0;color:black;width:100px">备份</a-button> -->
            <a-button
              type="danger"
              @click="delAll()"
            >删除</a-button>
          </div>
          <div class="page-left">
            <a-pagination
              :show-total="total => `共 ${total} 条记录`"
              v-model="current"
              :total="total"
              :defaultPageSize="size"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "yty-history",
  data() {
    return {
      form: {
        name: "",
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      endOpen: false,
      current: 1,
      size: 10,
      total: 0,
      searchKey: "", //搜索关键字
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          align: "center",
          ellipsis: true,
          width: "100px",
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,
        },
        {
          title: "备机分类",
          dataIndex: "spareProperty.propertyName",
          align: "center",
        },
        {
          title: "备机型号",
          dataIndex: "spareVersion",
          align: "center",
        },
        {
          title: "备机数量",
          dataIndex: "spareAmount",
          align: "center",
        },
        {
          title: "库存数量",
          dataIndex: "totalStock",
          align: "center",
        },
        {
          title: "已使用数量",
          dataIndex: "useStock",
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          align: "center",
        },

        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      data: [],
      delall: [],
      delList: [], //统一删除的id列表
      maintainStartTime: null, //开始时间
      maintainEndTime: null, //结束时间
      userId:''
    };
  },
  mounted() {
    this.getId();
    this.onSubmit();
    
  },
  methods: {
    getId(){
      this.userId = this.$user.id;
      console.log(this.userId)
    },
    onSelect(){
      
    },
    onChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      this.delall = selectedRows;
    },
    // 查询事件
    onSubmit() {
      var beginTime = JSON.parse(
        JSON.stringify(this.maintainStartTime ? this.maintainStartTime : "")
      );
      var endTime = JSON.parse(
        JSON.stringify(this.maintainEndTime ? this.maintainEndTime : "")
      );
      beginTime = new Date(beginTime).getTime();
      endTime = new Date(endTime).getTime();
      this.$api
        .PostspareStandbyShowEditList({
          currentPage: this.current,
          pageSize: this.size,
          searchKey: this.searchKey,
          startYear: beginTime,
          stopYear: endTime,
          userId:this.userId
        })
        .then((res) => {
          console.log(res);
          this.data = res.data.data.records;
          this.total = res.data.data.total;
          this.data.forEach((v) => {
            v.createTime = moment(v.createTime).format("YYYY-MM-DD");
          });
          this.data.forEach((v) => {
            if (v.modifyTime !== null) {
              v.modifyTime = moment(v.modifyTime).format("YYYY-MM-DD");
            }
          });
        });
    },
    // 日期方法
    disabledStartDate(startValue) {
      const endValue = this.maintainEndTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.maintainStartTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 日期方法完
    // 表格方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 表格单独删除按钮事件
    delBtnFn(data, index) {
      console.log(data, index);
      // this.$api.DeleteSpareStandby(data.id).then((res) => {
      //   console.log(res);
      // });
      // this.data.splice(index, 1);
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          _that.$api.DeleteSpareStandby(data.id).then((res) => {
            if (res.data.code == 0) {
              _that.$message.info("删除成功");
              _that.onSubmit();
            }
            else {
            this.$message.error(res.data.data);
          }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    // delSelect() {
    //   let _that = this;
    //   this.$confirm({
    //     title: "是否确认删除",
    //     onOk() {
    //       _that.$api.DeleteSpareStandby(data.id).then((res) => {
    //         if (res.data.code == 0) {
    //           _that.$message.info("删除成功");
    //           _that.onSubmit();
    //         }
    //         else {
    //         this.$message.error(res.data.data);
    //       }
    //       });
    //     },
    //     onCancel() {
    //       console.log("Cancel");
    //     },
    //     class: "delk",
    //   });
    // },
    // 批量删除事件
    delAll() {
      this.delall.forEach((v) => {
        this.delList.push(v.id);
      });
      // console.log(this.delList);
      // this.$api
      //   .PostdeleteSpareStandbyList({ idList: this.delList })
      //   .then((res) => {
      //     if (res.data.code == 0) {
      //       this.$message.success(res.data.data);
      //       this.onSubmit();
      //     } else {
      //       this.$message.error(res.data.data);
      //     }
      //     console.log(res);
      //   });
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          _that.$api.PostdeleteSpareStandbyList({ idList: _that.delList }).then((res) => {
            if (res.data.code == 0) {
              _that.$message.info("删除成功");
              _that.onSubmit();
            }
            else {
            this.$message.error(res.data.data);
          }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.onSubmit();
    },
    
  },
};
</script>
<style scoped>
.yty-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.yty-history .from-item__class {
  display: flex;
}
.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  display: flex;
  justify-content: space-between;
}
.page-left {
  position: absolute;
  right: 3%;
  bottom: 45px;
}

.page-right {
  display: flex;
  position: absolute;
  left: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
::v-deep.yty-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  /* display: flex;
  justify-content: space-between; */
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.yty-history .ant-table table {
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
::v-deep.yty-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep.yty-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #2c6a60;
}
::v-deep.yty-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.yty-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.yty-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.yty-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.yty-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
/* 分页 */
::v-deep.yty-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>